import React from 'react';
import './App.css';

import Fb from './Day1/Fb';
import HelloWorld from './Day1/HelloWorld';
import HelloWorldFn from './Day1/HelloWorldFn';
import NumberList from './Day1/NumberList';
import Input from './Day1/Input';

// import Day2 from './Day2';
import FetchUser from './Day2/FetchUser';
import Form from './Day2/Form';
import NewForm from './Day2/FromHoc';
import Calc from './Day2/Calc';


const menus = [
  {
    title: 'Hello World',
    Component: HelloWorld,
    groupTitle: 'Day1',
  },
  {
    title: 'Hello World Fn',
    Component: HelloWorldFn,
  },
  {
    title: 'Number List',
    Component: NumberList,
  },
  {
    title: 'Fb',
    Component: Fb,
  },
  {
    title: 'Input',
    Component: Input,
  },

  // {
  //   title: 'Day2',
  //   Component: Day2,
  // },

  {
    title: 'Fetch User',
    Component: FetchUser,
  },
  {
    title: 'Form',
    Component: Form,
  },
  {
    title: 'FormHoc',
    Component: NewForm,
  },
  {
    title: 'Calc',
    Component: Calc,
  },

];


class App extends React.Component {
  state = {
    menuIndex: 0,
  };

  componentDidMount(){
    const menuIndex = Number(window.location.hash.substring(1));
    this.setState({menuIndex});
  }

  onMenuChange = menuIndex => {
    this.setState({ menuIndex });
    window.location.hash= menuIndex;
  };

  render() {
    const { menuIndex } = this.state;
    // eslint-disable-next-line no-unused-vars
    const { title, Component } = menus[menuIndex];
    return (
      <div className="app">
        <div className="menu">
          <ul>
            {menus.map((menu, index) => {
              const isCurrent = index === menuIndex;
              const groupTitle = menu.groupTitle;
              return (
                <li
                  className={isCurrent ? 'active' : ''}
                  onClick={() => this.onMenuChange(index)}
                  key={index}
                >
                  {groupTitle && <h2>{groupTitle}</h2>}
                  {menu.title}
                </li>
              );
            })}
          </ul>
        </div>
        <div className="main">
          <Component />
        </div>
      </div>
    );
  }
}

export default App;
